<template>
  <div>
    <NavBar :title="'声场调节'" @leftClick="leftClick" />
    <div class="soundMain">
      <div class="soundBox" v-for="item in soundMainList" :key="item.id">
        <div class="soundBoxLeft">
          <div class="textFont">{{ item.name }}</div>
          <div class="textNum">{{ item.value }}</div>
        </div>
        <van-slider
          v-model="item.value"
          @change="onChangeOriginal(item.id, item.value)"
          bar-height="6px"
          :max="40"
          :min="0"
          active-color="#0A59F7"
          button-size="16px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  components: {
    NavBar,
  },
  name: "soundField",
  data() {
    return {
      value: 0,
      soundMainList: [
        {
          id: 0,
          name: "前后",
          value: this.soundFieldback,
        },
        {
          id: 1,
          name: "左右",
          value: this.soundFieldLeftRight,
        },
      ],
    };
  },
  created() {
    this.soundMainList[0].value = this.soundFieldback;
    this.soundMainList[1].value = this.soundFieldLeftRight;
  },
  computed: {
    ...mapState({
      soundField: (state) => state.ble.soundField,
      soundFieldback: (state) => state.ble.soundFieldback,
      soundFieldLeftRight: (state) => state.ble.soundFieldLeftRight,
    }),
  },
  mounted() {
    window.hilink && window.hilink.setTitleVisible(false);
  },
  beforeDestroy() {
    window.hilink && window.hilink.setTitleVisible(true);
  },
  methods: {
    leftClick() {
      this.$router.push("/");
    },
    // 声场调节
    onChangeOriginal(id, val) {
      console.log(id, val, this.soundFieldback.toString(16).padStart(2, 0));
      if (id == 0) {
        let str =
          `F05505000DF2${this.soundField.toString(16).padStart(2, 0)}${
            this.soundFieldback.toString(16).padStart(2, 0) &&
            val.toString(16).padStart(2, 0)
          }${this.soundFieldLeftRight.toString(16).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05505000DF2${this.soundField.toString(16).padStart(2, 0)}${
              this.soundFieldback.toString(16).padStart(2, 0) &&
              val.toString(16).padStart(2, 0)
            }${this.soundFieldLeftRight.toString(16).padStart(2, 0)}`
          );
        window.bleManage.send(str);
        console.log("声场调节--前后", str);
      }
      if (id == 1) {
        //
        let str =
          `F05505000DF2${this.soundField
            .toString(16)
            .padStart(2, 0)}${this.soundFieldback.toString(16).padStart(2, 0)}${
            this.soundFieldLeftRight.toString(16).padStart(2, 0) &&
            val.toString(16).padStart(2, 0)
          }` +
          this.$getCheckSum(
            `F05505000DF2${this.soundField
              .toString(16)
              .padStart(2, 0)}${this.soundFieldback
              .toString(16)
              .padStart(2, 0)}${
              this.soundFieldLeftRight.toString(16).padStart(2, 0) &&
              val.toString(16).padStart(2, 0)
            }`
          );
        window.bleManage.send(str);
        console.log("声场调节--左右", str);
      }
    },
  },
};
</script>

<style lang="less">
.soundMain {
  width: 336px;
  height: 136px;
  background: var(--box_bg);
  opacity: 1;
  border-radius: 16px;
  margin: auto;
  padding: 4px 0px;
  .soundBox {
    display: flex;
    align-items: center;
    height: 64px;
    // background: red;
    padding: 0 16px;
    .soundBoxLeft {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 88px;
      height: 64px;
      .textFont {
        font-size: 16px;
        color: var(--font);
      }
      .textNum {
        font-size: 12px;
        color: var(--font_gray);
      }
    }
  }
}
</style>